import { makeStyles } from '@mui/styles';

export const useStyles = makeStyles(() => {
    return {
        textTitle: {
            color: '#ffffff',
            fontWeight: '600',
            fontSize: '25px',
            lineHeight: '110%',
            borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
            width: '80%',
            textAlign: 'center'
        },
        textContent: { color: '#ffffff', fontWeight: 'bold', fontSize: '18px', lineHeight: '33px' },
        closeBtn: { position: 'absolute', right: '10px' },
        props: {
            marginBottom: '1.25rem',
            marginRight: '1rem'
        },
        dialogBackground: {
            background:
                'linear-gradient(278.2deg, rgba(56, 175, 254, 0.95) -29.02%, rgba(74, 17, 145, 0.95) 113.46%)'
        },
        center: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
        dialogContent: {
            color: '#ffffff',
            paddingLeft: '40px',
            paddingRight: '40px',
            paddingBottom: '40px'
        },
        card: { background: '#5148fc', padding: '16px', marginBottom: '10px' },
        button: {
            background: '#5148fc',
            '&:hover': {
                background: '#5148fc',
                color: '#ffffff'
            },
            '& .MuiLoadingButton-loadingIndicator': {
                color: '#ffffff'
            }
        },
        icon: { height: 15, width: 15, marginLeft: '8px' },
        bigIcon: { height: 20, width: 20, marginLeft: '8px' },
        menuItem: { color: 'black' }
    };
});
